<template>
  <div class="home">
    <div class="welcome-container">
      <h1 class="welcome-title">Welcome</h1>
      <p class="welcome-subtitle">欢迎使用库存管理系统</p>
      <div class="user-info" v-if="userStore.isLogin">
        <p>欢迎回来，{{ userStore.username || '用户' }}！</p>
        <button @click="logout" class="logout-btn">退出登录</button>
      </div>
      <div class="auth-status" v-else>
        <p>您尚未登录</p>
        <button @click="goToLogin" class="login-btn">去登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

onMounted(() => {
  console.log('🏠 主页组件加载');
  console.log('🔍 认证状态检查:', {
    isLogin: userStore.isLogin,
    hasToken: !!userStore.token,
    token: userStore.token,
    username: userStore.username
  });
  
  // 路由守卫已经处理了认证检查，这里只需要显示内容
  console.log('✅ 已通过路由守卫认证，显示主页内容');
});

function logout() {
  userStore.logout();
  router.push('/login');
}

function goToLogin() {
  router.push('/login');
}
</script>

<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 60px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.welcome-container {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.welcome-title {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: #666;
  margin: 0 0 2rem 0;
}

.user-info, .auth-status {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 8px;
}

.user-info {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.auth-status {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.logout-btn, .login-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.logout-btn {
  background: #dc3545;
  color: white;
}

.logout-btn:hover {
  background: #c82333;
}

.login-btn {
  background: #007bff;
  color: white;
}

.login-btn:hover {
  background: #0056b3;
}
</style> 